<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			#box{
				position: absolute;
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	
	<script type="text/javascript">
		
		window.onload = function(){
			var drag = new Drag('box');
			drag.init();
		};
			function Drag(id){
				this.obj = document.getElementById(id);
				this.disX = 0;
				this.disY = 0;
			}
			Drag.prototype.init = function(){
				//this指针
				var me = this;
				this.obj.onmousedown = function(ev){
					var ev = ev || event;
					me.mouseDown(ev);
					return false;
				};
			};
			
			Drag.prototype.mouseDown = function(ev){
				var me = this;
				this.disX = ev.clientX - this.obj.offsetLeft;
				this.disY = ev.clientY - this.obj.offsetTop;
				
				document.onmousemove = function(ev){
					var ev = ev || window.event;
					me.mouseMove(ev);
				};
				document.onmouseup = function(){
					me.mouseUp();
				}
			};
			Drag.prototype.mouseMove = function (ev){
			    this.obj.style.left = (ev.clientX - this.disX) + 'px';
			    this.obj.style.top = (ev.clientY - this.disY) + 'px';
			};
			Drag.prototype.mouseUp = function (){
			    document.onmousemove = null;
			    document.onmouseup = null;
			};
		
	</script>
</html>
